  <template>
    <div class="flower-ai-app">
      <header class="app-header">
        <h1>花艺AI测试应用</h1>
        <p class="subtitle">使用RAG系统和DeepSeek API进行花艺知识查询和设计</p>
      </header>
  
      <main class="app-main">
        <section class="query-section">
          <h2>花艺知识查询</h2>
          <div class="input-group">
            <label for="flower-question">输入你的花艺问题：</label>
            <textarea 
              id="flower-question" 
              v-model="question" 
              placeholder="请告诉我婚礼插花应该是什么样子的"
              class="question-input"
            ></textarea>
          </div>
  
          <div class="options-group">
            <label class="checkbox-option">
              <input type="checkbox" v-model="generateImage">
              <span>生成相关图像</span>
            </label>
            
            <button class="submit-btn" @click="submitQuestion">提交问题</button>
          </div>
  
          <div class="examples">
            <p>示例问题：</p>
            <ul class="example-list">
              <li>"推荐适合中式插花的花材"</li>
              <li>"欧式插花与日式插花的区别"</li>
              <li>"如何搭配红色和白色的花"</li>
            </ul>
          </div>
        </section>
      </main>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import axios from 'axios'
  const isCollapsed = ref(false);
  
  axios({
    url:'/api/******',
    method:'get'
  }).then(res=>{
    console.log(res)
  })
  
  </script>
  
  <style scoped>
  .flower-ai-app {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Arial', sans-serif;
    color: #333;
  }
  
  .app-header {
    text-align: center;
    margin-bottom: 20px;
  }
  
  .app-header h1 {
    font-size: 28px;
    margin-bottom: 5px;
  }
  
  .subtitle {
    font-size: 14px;
    color: #666;
  }
  
  .app-nav {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
  }
  
  .nav-btn {
    padding: 8px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #666;
  }
  
  .nav-btn.active {
    color: #4a8af4;
    font-weight: bold;
    border-bottom: 2px solid #4a8af4;
  }
  
  .divider {
    height: 1px;
    background: #eee;
    margin: 15px 0;
  }
  
  .query-section {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
  }
  
  .query-section h2 {
    margin-top: 0;
    font-size: 20px;
    color: #444;
  }
  
  .input-group {
    margin-bottom: 15px;
  }
  
  .input-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
  }
  
  .question-input {
    width: 100%;
    min-height: 100px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    resize: vertical;
  }
  
  .options-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  
  .checkbox-option {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  
  .checkbox-option input {
    margin-right: 8px;
  }
  
  .submit-btn {
    padding: 10px 20px;
    background-color: #4a8af4;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
  }
  
  .submit-btn:hover {
    background-color: #3a7ae8;
  }
  
  .examples {
    margin-top: 25px;
    font-size: 14px;
    color: #666;
  }
  
  .example-list {
    padding-left: 20px;
    margin-top: 8px;
  }
  
  .example-list li {
    margin-bottom: 5px;
    font-style: italic;
  }
  </style>
  